import React from 'react';
import { Tag, Toast, ListView, PullToRefresh } from 'antd-mobile';
import * as request from './request';
import { connect } from 'react-redux';

const apiURL = "/api/services/app/Edu_Course/GetList";
class App extends React.Component {
    constructor(props) {
        super(props);
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2
        })
        this.state = {
            dataSource,
            dataArr: [],
            displaySearch: false,
            useBodyScroll: false,
            refreshing: true,
            isLoading: true,
            visible: false,
            pageSize: 10,
            pageIndex: 1,
        }
    }
    componentDidMount() {
        this.fetchData(true);
    }
    componentWillUnmount = () => {
        this.setState = () => {
            return;
        };
    }

    fetchData = (ref) => {
        this.setState({ refreshing: true, isLoading: true });
        const { isRec, cType } = this.props;
        const { pageIndex, pageSize } = this.state;
        let SkipCount = (pageIndex - 1) * pageSize;
        let MaxResultCount = pageSize;
        let expre = "?SkipCount=" + SkipCount + "&MaxResultCount=" + MaxResultCount;
        if (isRec === 'true') {
            expre += "&isRec="+isRec
        }
        if (cType) {
            expre += "&cType="+cType
        }
        request.get(apiURL + expre)
            .then((data) => {
                var dataArr = [];
                const len = data.result.items.length;
                if (len <= 0) { // 判断是否已经没有数据了
                    this.setState({
                        refreshing: false,
                        isLoading: false,
                        hasMore: false
                    })
                    Toast.info('没有数据了~', 1)
                    return false
                }

                if (ref) {
                    dataArr = data.result.items.concat(this.state.dataArr)
                }
                else {
                    dataArr = data.result.items;
                }

                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(dataArr),
                    dataArr,
                    refreshing: false,
                    isLoading: false,
                    pageIndex
                });
            })
    };
    onRefresh = () => {
        console.log('onRefresh');
        this.setState({
            refreshing: true,
            isLoading: true,
            pageIndex: this.state.pageIndex + 1
        }, () => {
            this.fetchData(true)
        })
    }

    // 滑动到底部时加载更多
    onEndReached = () => {
        console.log('onEndReached');
        // 加载中或没有数据了都不再加载
        if (!this.state.hasMore && !this.state.isLoading) {
            return
        }
        this.setState({
            isLoading: true,
            pageIndex: this.state.pageIndex + 1, // 加载下一页
        }, () => {
            this.fetchData(true)
        })
    }
    render() {
        const { dataSource, pageSize } = this.state
        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID}
                    onClick={()=>this.props.history.push('/Detail/'+rowData.id)}
                    className='my-list'
                    style={{
                        padding: '0 15px',
                        backgroundColor: 'white',
                    }}
                >
                    <div style={{ display: '-webkit-box', display: 'flex', padding: '10px 5px' }}>
                        {rowData.imageUrl ? <img style={{ height: '63px', width: '80px', marginRight: '15px' }} className='itemimg' src={request.imgServer + rowData.imageUrl} alt="" /> : null}
                        <div style={{ display: 'inline-block' }}>
                            <div className='itemtit'>{rowData.title}</div>
                            <div className='itemsumy'><Tag small style={{ marginRight: 3 }}>{rowData.cType === 'common' ? '科普' : '视频'}</Tag> {tags(rowData.tags)} </div>
                            <div className='itemsumy'>{rowData.summary}</div>
                        </div>
                    </div>
                </div>
            );
        };
        const tags = (items) => {
            if (items) {
                var array = items.split(',');
                var resp = array.map((element, i) => {
                    return (<Tag key={i} selected small style={{ marginRight: 3 }}>{element}</Tag>);
                });
            }
            return resp;
        }
        return (
            <ListView
                key='1'
                ref={el => this.lv = el}
                dataSource={dataSource}
                renderFooter={() => (<div className="footer">{this.state.isLoading ? '加载中...' : '暂无更多数据'}</div>)}
                renderRow={row}
                useBodyScroll
                pullToRefresh={<PullToRefresh
                    refreshing={this.state.refreshing}
                    onRefresh={this.onRefresh}
                />}
                onEndReached={this.onEndReached}
                pageSize={pageSize}
            />
        )
    };
}
export default connect(
    state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(App)
